<template>
	<view class="container">
		<view class="flex flex-direction-column flex-sub diygw-col-24">
			<view class="flex flex-direction-column flex-sub">
				<view @tap="changeCollapse1" data-index="0" class="diygw-text-md padding flex solid-bottom" :class="[collapse1Index.includes('0') ? 'text- cur ' : '']">
					<view class="flex-sub"> 菜单一 </view>
					<i class="diy-icon-unfold" :class="[collapse1Index.includes('0') ? 'diy-collapse-active' : '']"></i>
				</view>
				<view v-if="collapse1Index.includes('0')" class="solid-bottom flex-sub padding-xs">
					<view class="diygw-col-24" v-html="text4"></view>
				</view>
			</view>
			<view class="flex flex-direction-column flex-sub">
				<view @tap="changeCollapse1" data-index="1" class="diygw-text-md padding flex solid-bottom" :class="[collapse1Index.includes('1') ? 'text- cur ' : '']">
					<view class="flex-sub"> 菜单二 </view>
					<i class="diy-icon-unfold" :class="[collapse1Index.includes('1') ? 'diy-collapse-active' : '']"></i>
				</view>
				<view v-if="collapse1Index.includes('1')" class="solid-bottom flex-sub padding-xs">
					<view class="diygw-col-24" v-html="text5"></view>
				</view>
			</view>
			<view class="flex flex-direction-column flex-sub">
				<view @tap="changeCollapse1" data-index="2" class="diygw-text-md padding flex solid-bottom" :class="[collapse1Index.includes('2') ? 'text- cur ' : '']">
					<view class="flex-sub"> 菜单三 </view>
					<i class="diy-icon-unfold" :class="[collapse1Index.includes('2') ? 'diy-collapse-active' : '']"></i>
				</view>
				<view v-if="collapse1Index.includes('2')" class="solid-bottom flex-sub padding-xs">
					<view class="diygw-col-24" v-html="text6"></view>
				</view>
			</view>
		</view>
		<view class="flex diygw-col-24 line1-clz">
			<view class="diygw-pzx" style="border-bottom: 1px solid #eee"></view>
		</view>
		<view class="flex flex-direction-column flex-sub diygw-col-24">
			<view class="flex flex-direction-column flex-sub">
				<view @tap="changeCollapse2" data-index="0" class="diygw-text-md padding flex solid-bottom" :class="[collapse2Index.includes('0') ? 'bg-green cur ' : '']">
					<view class="flex-sub"> 手风琴效果 </view>
					<i class="diy-icon-unfold" :class="[collapse2Index.includes('0') ? 'diy-collapse-active' : '']"></i>
				</view>
				<view v-if="collapse2Index.includes('0')" class="solid-bottom flex-sub padding-xs">
					<view class="diygw-col-24" v-html="text8"></view>
				</view>
			</view>
			<view class="flex flex-direction-column flex-sub">
				<view @tap="changeCollapse2" data-index="1" class="diygw-text-md padding flex solid-bottom" :class="[collapse2Index.includes('1') ? 'bg-green cur ' : '']">
					<view class="flex-sub"> 菜单二 </view>
					<i class="diy-icon-unfold" :class="[collapse2Index.includes('1') ? 'diy-collapse-active' : '']"></i>
				</view>
				<view v-if="collapse2Index.includes('1')" class="solid-bottom flex-sub padding-xs">
					<view class="diygw-col-24" v-html="text9"></view>
				</view>
			</view>
			<view class="flex flex-direction-column flex-sub">
				<view @tap="changeCollapse2" data-index="2" class="diygw-text-md padding flex solid-bottom" :class="[collapse2Index.includes('2') ? 'bg-green cur ' : '']">
					<view class="flex-sub"> 菜单三 </view>
					<i class="diy-icon-unfold" :class="[collapse2Index.includes('2') ? 'diy-collapse-active' : '']"></i>
				</view>
				<view v-if="collapse2Index.includes('2')" class="solid-bottom flex-sub padding-xs">
					<view class="diygw-col-24" v-html="text10"></view>
				</view>
			</view>
		</view>
		<view class="flex diygw-col-24 line-clz">
			<view class="diygw-pzx" style="border-bottom: 1px solid #eee"></view>
		</view>
		<view class="flex flex-direction-column flex-sub diygw-col-24">
			<view class="flex flex-direction-column flex-sub">
				<view @tap="changeCollapse" data-index="0" class="diygw-text-md padding flex solid-bottom" :class="[collapseIndex.includes('0') ? 'bg- cur collapse-title-cur' : 'collapse-title']">
					<view class="flex-sub"> 改变折叠面板颜色 </view>
					<i class="diy-icon-unfold" :class="[collapseIndex.includes('0') ? 'diy-collapse-active' : '']"></i>
				</view>
				<view v-if="collapseIndex.includes('0')" class="solid-bottom flex-sub padding-xs">
					<view class="diygw-col-24" v-html="text"></view>
				</view>
			</view>
			<view class="flex flex-direction-column flex-sub">
				<view @tap="changeCollapse" data-index="1" class="diygw-text-md padding flex solid-bottom" :class="[collapseIndex.includes('1') ? 'bg- cur collapse-title-cur' : 'collapse-title']">
					<view class="flex-sub"> 菜单二 </view>
					<i class="diy-icon-unfold" :class="[collapseIndex.includes('1') ? 'diy-collapse-active' : '']"></i>
				</view>
				<view v-if="collapseIndex.includes('1')" class="solid-bottom flex-sub padding-xs">
					<view class="diygw-col-24" v-html="text1"></view>
				</view>
			</view>
			<view class="flex flex-direction-column flex-sub">
				<view @tap="changeCollapse" data-index="2" class="diygw-text-md padding flex solid-bottom" :class="[collapseIndex.includes('2') ? 'bg- cur collapse-title-cur' : 'collapse-title']">
					<view class="flex-sub"> 菜单三 </view>
					<i class="diy-icon-unfold" :class="[collapseIndex.includes('2') ? 'diy-collapse-active' : '']"></i>
				</view>
				<view v-if="collapseIndex.includes('2')" class="solid-bottom flex-sub padding-xs">
					<view class="diygw-col-24" v-html="text2"></view>
				</view>
			</view>
		</view>
		<view class="clearfix"></view>
	</view>
</template>

<script>
	//create by: 邓志锋 <280160522@qq.com> <https://www.diygw.com> DIYGW可视化设计一键生成源码
	export default {
		data() {
			return {
				collapse1Index: ['0'],
				text4: `内容1`,
				text5: `内容2`,
				text6: `内容3`,
				collapse2Index: ['0'],
				text8: `内容1`,
				text9: `内容2`,
				text10: `内容3`,
				collapseIndex: ['0'],
				text: `内容1`,
				text1: `内容2`,
				text2: `内容3`
			};
		},
		onShareAppMessage: function () {},
		onLoad(option) {
			this.setCurrentPage(this);
			if (option) {
				this.setData({
					globalOption: option
				});
			}
		},
		mounted() {
			this.init();
		},
		methods: {
			async init() {},
			changeCollapse1(evt) {
				let { index } = evt.currentTarget.dataset;
				let collapse1Index = this.collapse1Index;
				if (collapse1Index.includes(index)) {
					let findIndex = collapse1Index.findIndex((item) => {
						return item == index;
					});
					collapse1Index.splice(findIndex, 1);
				} else {
					collapse1Index.push(index);
				}
				this.setData({ collapse1Index });
			},
			changeCollapse2(evt) {
				let { index } = evt.currentTarget.dataset;
				let collapse2Index = this.collapse2Index;
				collapse2Index[0] = index;
				this.setData({ collapse2Index });
			},
			changeCollapse(evt) {
				let { index } = evt.currentTarget.dataset;
				let collapseIndex = this.collapseIndex;
				collapseIndex[0] = index;
				this.setData({ collapseIndex });
			}
		}
	};
</script>

<style lang="scss">
	.line1-clz {
		margin-left: 0px;
		width: calc(100% - 0px - 0px) !important;
		margin-top: 5px;
		margin-bottom: 5px;
		margin-right: 0px;
	}
	.line-clz {
		margin-left: 0px;
		width: calc(100% - 0px - 0px) !important;
		margin-top: 5px;
		margin-bottom: 5px;
		margin-right: 0px;
	}
	.collapse-title {
		background-color: rgba(140, 255, 195, 1) !important;
		color: rgba(0, 0, 0, 1) !important;
	}
	.collapse-title-cur {
		background-color: #07c160 !important;
		color: rgba(255, 255, 255, 1) !important;
	}
	.container {
		padding-left: 0px;
		padding-right: 0px;
	}
</style>
